<template>
  <view class="pay-password-container">
    <e-navbar leftTitle="支付密码"></e-navbar>
    <view class="pay-item">
      <view class="m-b-24 font-28">手机号</view>
      <view class="pay-item_input">
        <u-input v-model="form.mobile" placeholder="请输入手机号" placeholderClass="placeholderClass" border="none" type="number" maxlength="11"></u-input>
      </view>
    </view>
    <view class="pay-item">
      <view class="m-b-24 font-28">验证码</view>
      <view class="pay-item_input flex col-center" style="padding: 20rpx 30rpx;">
        <u-input v-model="form.code" placeholder="请输入验证码" placeholderClass="placeholderClass" border="none" type="number" maxlength="6"></u-input>
        <view class="">
          <view class="code-btn" v-if="btn.showText" @click="getCode()">{{btn.btnText}}</view>
          <view class="code-btn" v-else>{{btn.btnTime}}s重新发送</view>
        </view>
      </view>
    </view>
    <view class="pay-item">
      <view class="m-b-24 font-28">支付密码</view>
      <view class="pay-item_input">
        <u-input v-model="form.password" placeholder="请设置支付密码" placeholderClass="placeholderClass" border="none" type="password" maxlength="6"></u-input>
      </view>
    </view>
    <u-gap height="120"></u-gap>
    <view class="main-btn m-30">
      <u-button text="确认" color="#1F66FF" @click="handleConfirmBtn"></u-button>
    </view>
    <e-popup ref="setPayPassword" @close="handleClosePopup" @confirm="handleConfirmPopup"></e-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      form: {
        mobile: "",
        code: "",
        password: ""
      },
      btn:{
        btnText: "发送验证码",
        btnTime: 60,
        showText: true,
      }
    };
  },
  methods: {
    getCode(){
      let { btn } = this;
      btn.showText = false;
      this.$u.toast("验证码已发送");
      let timer = setInterval(()=>{
        btn.btnTime--;
        if(btn.btnTime <= 0) {
          btn.showText = true;
          btn.btnText = "发送验证码";
          btn.btnTime = 60;
          clearInterval(timer);
        }
      }, 1000)
    },
    handleConfirmBtn(){
      this.$refs.setPayPassword.handleShowPopup("是否确认设置支付密码?");
    },
    handleClosePopup(){
      this.$refs.setPayPassword.handleClosePopup();
    },
    handleConfirmPopup(){
      this.handleClosePopup();
      this.$u.toast("设置成功");
    }
  },
  options: {
    styleIsolation: 'shared'
  }
}
</script>

<style lang="scss" scoped>
  .pay-password-container{
    .pay-item{
      padding: 30rpx 30rpx 0 30rpx;
      &_input{
        padding: 30rpx;
        background: #fff;
        border-radius: 20rpx;
      }
      /deep/ .placeholderClass{
        font-size: 28rpx !important;
        color: #999 !important;
      }
      .code-btn{
        padding: 20rpx 20rpx;
        color: #fff;
        background: #1F66FF;
        border-radius: 10rpx;
        font-size: 20rpx;
      }
    }
  }
</style>
